<template>
	<view class="bigBox">
		<view>
			<view class="van_top">
				<van-nav-bar title="精品商品" fixed left-arrow @click-left="onClickLeft" />
			</view>
			<view class="content" :style="{ paddingTop: (statusBarHeight + 46) + 'px' }">
				<!-- <view class="safe-area" :style="{ height: (statusBarHeight + 46) + 'px' }" style="width: 100%;"></view> -->
				<view class="content-box">
					<view class="search" @click="goSearch">
						<view class="inner">
							<van-icon name="search" />
							<view class="txt">
								搜索商品
							</view>
						</view>
					</view>
				</view>
				<scroll-view scroll-x class="scroll" :scroll-left="left" :scroll-with-animation="true">
					<view class="item" @click="showThreeCategory(item.categoryId, index)" :class="activeIndex == index ? 'active' : ''"
						v-for="( item, index ) in  categoryList " :key="item.id">
						<view class="pic">
							<!-- <view class="image"></view> -->
							<image :src="item.imgUrl" mode="aspectFill"></image>
						</view>
						<view class="txt van-ellipsis">{{ item.name }}</view>
					</view>
				</scroll-view>
				<view class="shaixuan">
					<text class="xiaoliang" :class="{ active: filter == '0' }" @click="updateFilter('0')">综合</text>
					<text class="xiaoliang" :class="{ active: filter == '3' }" @click="updateFilter('3')">销量</text>
					<view class="xiaoliang" :class="{ active: priceFilter !== '99' }" @click="updateFilter('999')"
						style="display: flex;align-items: center;justify-content: center;">
						<text style="width:50% ;">价格</text>
						<image class="pic" src="../../../static/category/sort0.png" mode="aspectFill" v-if="priceFilter == '99'">
						</image>
						<image class="pic" src="../../../static/category/sort1.png" mode="aspectFill" v-if="priceFilter == '1'">
						</image>
						<image class="pic" src="../../../static/category/sort2.png" mode="aspectFill" v-if="priceFilter == '2'">
						</image>
					</view>
				</view>

				<view class="goodsList" :style="{ paddingBottom: (safeAreaBottom + 80) + 'px' }">
					<scroll-view enhanced scroll-y="true" :show-scrollbar="false" class="scroll-Y" @scrolltolower="lower" style="height: 100%;"
						:refresher-triggered="triggered" refresher-enabled @refresherrefresh="refresherrefreshFn">
						<ShopCard v-for="( item, index ) in  goodsList " :key="item.id" :ecCommodityId="item.id" :ecCommodityType="item.type"
							:sellout="item.releaseStock === 0" :style="{ marginBottom: (index == goodsList.length - 1) ? 0 : '16rpx' }"
							@click.native="toDetail(item.id, item.releaseStock)" @refreshPage="refresherrefreshFn" @clickAddBtn="clickAddBtn"
							:animationStatus="start">
							<template #pic>
								<block>
									<image :src="item.images" mode="aspectFill"></image>
								</block>
							</template>
							<template #title>
								<block>{{ item.name }}</block>
							</template>
							<template #subtitle1>
								<block>{{ item.subTitle }}</block>
							</template>
							<template #subtitle2>
								<block>规格：{{ item.deliveryNorms }}KG</block>
							</template>
							<template #limit v-if="item.limitCount != 0">
								<block>每日限购：{{ item.limitCount }}</block>
							</template>
							<template #price>
								<block>
									<PriceFont color="#FF4F30" bigSize="40rpx" smallSize="28rpx" :price="item.normsPrice" />
								</block>
							</template>
						</ShopCard>
						<uni-load-more :status="loading"></uni-load-more>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="bottomFix" :style="{ paddingBottom: safeAreaBottom + 'px' }">
			<view class="left">
				<view class="icon_box" @click="goIndex">
					<view class="pic">
						<image src="/static/tabbar/home.png" mode="aspectFill"></image>
					</view>
					<view class="txt">首页</view>
				</view>
				<view class="icon_box" @click="goShopCar">
					<view class="pic">
						<image :src="allCount != 0 ? '/static/tabbar/shopcar_active.png' : '/static/tabbar/shopcar.png'" mode="aspectFill" id="car"></image>
						<view class="point" v-if="allCount != 0">{{ allCount }}</view>
					</view>
					<view class="txt" :class="allCount != 0 ? 'active' : ''">购物车</view>
				</view>
			</view>
			<view class="btn" :class="allCount != 0 ? 'active' : ''" @click="goShopCar">去下单({{ allCount }})</view>
		</view>
		<view class="btncar" :class="start ? 'move':''" :style="{top:curPos.top + 'px',left:curPos.left  + 'px',transform:xMove}">
			<view class="box" :class="start ? 'move':''" :style="{transform:yMove}">
				<van-icon name="shopping-cart-o" size="36rpx" />
			</view>
		</view>
	</view>
</template>

<script>
	let safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom;
	var screenWidth = wx.getSystemInfoSync().windowWidth;
	let itemWidth = screenWidth / 5.5; //表示窗口横排显示5个item
	import app from '@/App.vue'
	import { reqGetNonStandardCategory, reqGetNonStandardGoods } from '@/apis/rexiaogoods';
	import { mapGetters } from 'vuex';
	import addCarAniMix from '@/utils/addCarAniMix';
	export default {
		name: 'GenericShopGood',
		mixins:[addCarAniMix],
		data() {
			return {
				safeAreaBottom: safeAreaBottom,
				statusBarHeight: app.globalData.statusBarHeight,
				categoryList: [],
				activeIndex: '',
				activeKey: 0,
				left: 0,
				categoryId: '',
				goodsList: [],
				page: {
					pageSize: 15,
					pageNum: 1,
					total: 0
				},
				filter: '0',
				priceFilter: '99',
				totalNum: 99,
				loading: 'loading',
				triggered: false,
			}
		},
		computed: {
			...mapGetters('car', ['allCount'])
		},
		onLoad() {
			this.getCategoryTwo();
			const query = wx.createSelectorQuery()
			query.select("#car").boundingClientRect((res) => {
				this.targetPos = {top: res.top,left: res.left}
			}).exec();
		},
		methods: {
			onClickLeft() {
				uni.navigateBack({
					delta: 1,
				})
			},
			async getCategoryTwo() {
				let res = await reqGetNonStandardCategory();
				if (res.code === 200) {
					this.categoryList = res.data;
					this.level2id = res.data[0].categoryId
					console.log('this.level2id', this.level2id);
					this.getGoodsList()
					// if (this.level2id) {
					//   let index = this.categoryList.findIndex(item => item.id == this.level2id);
					//   console.log('index', index);
					//   this.showThreeCategory(this.level2id, index);
					// }
				}
			},
			showThreeCategory(id, index) {
				this.page = {
					pageSize: 15,
					pageNum: 1,
					total: 0
				}
				this.filter = '0'
				this.priceFilter = '99'
				this.goodsList = []
				this.activeIndex = index;
				this.level2id = id
				console.log('id', id);
				this.scrollLeft();
				this.getGoodsList()
			},
			scrollLeft() {
				let tabList = this.categoryList;
				let tabIndex = this.activeIndex;
				let scrollX = itemWidth * tabIndex - itemWidth * 2.5;
				let maxScrollX = (tabList.length + 1) * itemWidth;
				if (scrollX < 0) {
					scrollX = 0;
				} else if (scrollX >= maxScrollX) {
					scrollX = maxScrollX;
				}
				this.left = scrollX;
			},
			async getGoodsList() {
				let { pageNum, pageSize } = this.page;
				const res = await reqGetNonStandardGoods({ pageNum, pageSize, categoryId: this.level2id, filter: this.filter })
				if (res.code === 200) {
					const data = res.data
					this.triggered = false
					// 数组去重
					let arr = [...this.goodsList, ...data.list];
					const map = new Map();
					const newArr = arr.filter(v => !map.has(v.id) && map.set(v.id, v));
					this.goodsList = newArr;
					// this.goodsList = [...this.goodsList, ...data.list]
					if (res.data.isLastPage) {
						this.loading = "noMore"
					}
				}
			},
			updateFilter(type) {
				if (type === '999') {
					if (this.priceFilter == '99') {
						this.priceFilter = '2'
					} else if (this.priceFilter == '1') {
						this.priceFilter = '2'
					} else if (this.priceFilter == '2') {
						this.priceFilter = '1'
					}
					this.filter = this.priceFilter
				} else {
					this.filter = type
					this.priceFilter = '99'
				}
				this.loading = "loading";
				this.page = {
					pageSize: 15,
					pageNum: 1,
					total: 0
				}
				this.goodsList = []
				this.getGoodsList()
			},
			lower() {
				if (this.loading == "noMore") {
					return;
				}
				this.page.pageNum++;
				this.loading = "loading";
				this.getGoodsList();
			},
			refresherrefreshFn() {
				this.page.pageNum = 1
				this.triggered = true
				this.goodsList = []
				this.loading = "loading";
				this.getGoodsList();
			},
			goIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goShopCar() {
				if (this.allCount == 0) return;
				uni.switchTab({ url: '/pages/shopCar/shopCar' })
			},
			toDetail(id, releaseStock) {
				if (releaseStock == 0) {
					uni.utils.toast("商品已售罄");
					return;
				}
				uni.navigateTo({ url: `/packageA/pages/genericGoodsDetail/genericGoodsDetail?id=${id}` })
			},
			goSearch() {
				uni.navigateTo({ url: '/packageA/pages/nosearchPage/nosearchPage' })
			}
		},
	}
</script>

<style lang="scss" scoped>
	::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}

	.content {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		height: 100vh;
		flex-direction: column;
	}

	.search {
		padding: 0 24rpx;
		color: #808080;
		height: 60rpx;

		.inner {
			width: 100%;
			height: 60rpx;
			padding-left: 24rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			border-radius: 50rpx;
			background-color: #fff;
			border: 1px solid #FF1642;
		}

		.txt {
			font-size: 28rpx;
			color: #808080;
			margin-left: 18rpx;
		}
	}

	.scroll {
		width: 100%;
		height: 140rpx;
		box-sizing: border-box;
		white-space: nowrap;
		padding: 0 8rpx;
		// height: 162rpx;
		margin-bottom: 20rpx;
		padding-top: 10rpx;

		.item {
			margin: 0 16rpx;
			height: 130rpx;
			width: 105rpx;
			display: inline-block;
			text-align: center;

			&.active {
				.pic {
					background-color: #FF1642 !important;
				}

				.txt {
					color: #FFFFFF !important;
					background: #FF1642;
					border-radius: 15rpx;
					height: 30rpx;
				}
			}

			.pic {
				width: 88rpx;
				height: 88rpx;
				padding: 4rpx;
				box-sizing: border-box;
				margin: 0 auto;
				margin-bottom: 6rpx;
				border-radius: 50%;
				background-color: #fff;

				image {
					width: 100%;
					height: 100%;
					background-color: #eee;
					border-radius: 50%;
				}
			}

			.txt {
				width: 100rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #333333;
				display: inline-block;
				text-align: center;
			}
		}
	}

	.shaixuan {
		height: 88rpx;
		display: flex;
		background-color: #F5F5F5;
		line-height: 88rpx;
		justify-content: space-between;
		font-weight: 400;
		font-size: 28rpx;
		color: #808080;

		.active {
			font-weight: 600;
			color: #333333;
		}

		.xiaoliang {
			width: 33%;
			text-align: center;
		}

		.pic {
			width: 26rpx;
			height: 26rpx;
			margin: 0 10rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.bottomFix {
		position: fixed;
		width: 750rpx;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		bottom: 0;
		padding-right: 24rpx;
		align-items: center;

		.left {
			margin-left: 48rpx;

			.icon_box {
				display: inline-block;
				width: 70rpx;
				margin-right: 38rpx;

				.pic {
					margin: 0 auto;
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 6rpx;
					position: relative;

					.point {
						position: absolute;
						top: -5rpx;
						right: -5rpx;
						font-weight: 500;
						font-size: 16rpx;
						color: #FFFFFF;
						width: 20rpx;
						height: 20rpx;
						background-color: #FF3030;
						border-radius: 50%;
						text-align: center;
						line-height: 20rpx;
					}

					image {
						width: 100%;
						height: 100%;
					}
				}

				.txt {
					width: 100%;
					font-weight: 400;
					font-size: 20rpx;
					color: #333333;
					text-align: center;

					&.active {
						color: #FF1642 !important;
					}
				}
			}
		}

		.btn {
			margin-right: 24rpx;
			width: 434rpx;
			height: 76rpx;
			border-radius: 40rpx;
			font-weight: 500;
			font-size: 32rpx;
			line-height: 76rpx;
			text-align: center;
			color: #808080;
			background: #DDDDDD;

			&.active {
				background: #FF1642;
				color: #FFFFFF;
			}

			&.red {
				color: #FF1642;
				border: 2rpx solid #FF1642;
			}
		}
	}

	.goodsList {
		// position: relative;
		// top: 0;
		// left: 0;
		// flex: 1;
		// height: 75vh;
		flex: 1;
		overflow: scroll;
		box-sizing: border-box;
		// height: 200rpx;
	}

	.btncar {
		position: fixed;
		z-index: 2000;
		width: 48rpx;
		height: 48rpx;
		color: #fff;
		transition-timing-function: linear;

		.box {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			background-color: #FF1642;
			transition-timing-function: cubic-bezier(0.5, -1, 1, 1)
		}
	}

	.move {
		transition: all 0.6s;
	}
</style>